%control {
	padding: 0.375rem 0.75rem;
	font-size: 0.875rem;
	border-radius: $control-radius;
}

input, textarea {
	@extend %control;

	border-radius: 0;
	background: rgba($white, $input-opacity);
	border: none;
	border-bottom: solid 1px rgba($white, $input-opacity);
	font-family: $font-family;
	font-size: 1rem;
	display: block;
	width: 100%;
	box-sizing: border-box;
	color: $white;
	resize: vertical;
	
	&::placeholder {
		color: currentColor;
		opacity: 0.4;
	}
	
	&:focus {
		outline: 0;
	
		&::placeholder {
			opacity: 0.2;
		}
	}
	
}

.status {
	display: inline-block;

	color: rgba($white, 0.5);

	.icon.success {
		color: $theme-color;
	}

	.icon.alert {
		color: $error-color;
	}
}

svg.icon {
	width: 1.125em;
	height: 1.125em;
	display: inline-block;
	fill: currentColor;
	vertical-align: middle;
	
	&.small {
		width: 0.75em;
		height: 0.75em;
	}
	
	&.inline {
		margin-top: -0.25em;
	}
}

.control {
	@extend %control;
	
	background: rgba($white, $control-opacity);
}

.button, .buttonbar > *, .segcontrol > * {
	@extend %control;
	
	background: rgba($white, $button-opacity);
	display: inline-block;
	cursor: pointer;
	transition: background-color $transition-t ease-out;
	transition: opacity $transition-t ease-out;
	box-shadow: 0 2px 1px $light-shadow;
	line-height: normal;
	
	&.default {
		font-weight: bold;
		background: $theme-color;
		color: $black;
		
		&:hover {
			background: $white;
		}
	}
	
	&:hover, &.selected {
		background: rgba($white, $button-hover-opacity);
		
		> svg.icon.dropdown {
			margin-top: 0.5em;
		}
	}

	&.disabled {
		opacity: $disabled-opacity;
		cursor: default;
		pointer-events: none;
	}
	
	> svg.icon {
		& + * {
			margin-left: 0.25em;
		}
		margin-top: -0.125em;
		
		&.dropdown {
			transition: margin-top $transition-t;
			margin-top: 0.125em;
			width: 0.375em;
			height: 0.375em;
		}
	}
}

.controlbar, .buttonbar, .segcontrol {
	display: flex;
	padding: 0;
	margin: 0; // Firefox injects a 16px margin for some reason without this.
	
	> * {
		margin-left: $pad*0.25;
	}
}

.buttonbar, .segcontrol {
	> * {
	   margin-left: 1px;
	   border-radius: 0;
	   display: inline-block;
	   
		&:first-child {
		   border-radius: $control-radius 0 0 $control-radius;
	   }
	   
	   &:last-child {
		   border-radius: 0 $control-radius $control-radius 0;
	   }
   }
}

.segcontrol > * {
	&:first-child {
		border-radius: $control-radius 0 0 $control-radius;
	}
	
	&:last-child {
		border-radius: 0 $control-radius $control-radius 0;
	}
}



.tooltip {
	display: flex;
	flex-flow: column;
	align-items: center;
	z-index: 10000;
	
	position: absolute;
	transform: translate(-50%, 0%);
	
	transition-property: opacity, margin-top;
	transition-duration: $transition-t;
	
	> .content {
		background: $tooltip-bg;
		color: $doc-white;
		padding: $pad;
		border-radius: $control-radius;
		max-width: 15rem;
		box-shadow: 0px 3px 4px $dark-shadow;
		overflow-wrap: break-word;
		backdrop-filter: blur(3px);
		
		code {
			font-weight: bold;
		}

		> .warningtext {
			display: block;
			color: $doc-light;
			margin-top: 0.5rem;
		}
	}
	
	header {
		display: flex;
		h1 {
			flex: 1;
		}
		
		.help.icon {
			@extend %link;
			margin-left: 1em;
			color: $mid;
		}
	}
	
	> .tip {
		fill: $tooltip-bg;
		width: 8px;
		height: 8px;
		transform: scale(1, -1);
	}
	
	&.flipped {
		transform: translate(-50%, -100%);
		.tip {
			transform: scale(1, 1);
			order: 1;
		}
	}

	
	.list {
		li {
			@extend %link;
			
			color: $doc-light;
			
			+ li {
				margin-top: 0.5em;
			}
			
			.check.icon {
				color: $doc-dark; 
				margin-right: 0.25em;
			}
			
			&.selected .check.icon {
				color: $theme-color;
			}

			&:not(.inactive):hover {
				color: $doc-lightest;
			}
			
			em {
				font-style: normal;
				font-weight: bold;
				color: $doc-white;
				padding: 0 0.15em;
				background: rgba($doc-mid, 0.3);
				border-radius: $control-radius;
			}
		}
	}
}

.example {
	svg.icon.load {
		@extend %link;
		color: $dark;
		float: right;
		display: inline-block;
		padding-left: $pad*0.5;
	}
	
	code {
		display: inline-block;
		word-break: break-all;
		width: 100%;

		i {
			@extend %ellipsis;
		}
	}
}